<template>
  <div class="mine">
    <!-- 页头 -->
    <div class="title">
      <div><i class="iconfont icon-shouye" @click="handleIndex"></i></div>
      <div>登录</div>
      <div @click="handleRegister">注册</div>
    </div>
    <!-- 登录 -->
    <div class="login-page">
      <div class="log">
        <div @click="handleClick('passreg')">
          <a href="javascript:;" :class="isShow === 'passreg'?'click':''">密码登录</a>
        </div>
        <div @click="handleClick('notereg')">
          <a href="javascript:;" :class="isShow === 'notereg'?'click':''">短信登录</a>
        </div>
      </div>
      <div v-show="isShow === 'passreg'" class="reg passreg">
        <div class="input">
          <input type="text" class="phone" placeholder="请输入手机号" v-model="phone">
          <input type="password" class="passone" placeholder="请输入密码" v-model="pwd">
          <div class="remove">忘记密码?</div>
        </div>
        <button class="btnsure" @click="handleLogin()">确认</button>
        <div class="remenber">
          <p><input type="checkbox" name="" class="inp"><span>一个月内记住登陆</span></p>
          <p>快速注册</p>
        </div>
      </div>
      <div v-show="isShow === 'notereg'" class="reg notereg">
        <div class="input">
          <input type="text" class="phone" placeholder="请输入手机号">
          <input type="password" class="passone" placeholder="请输入验证码">
          <div class="remove">获取验证码</div>
        </div>
        <button class="btnsure" @click="handleLogin()">确认</button>
        <p class="soonreg">快速注册</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import sha256 from 'crypto-js/sha256'
import Base64 from 'crypto-js/enc-base64'
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      isShow: 'passreg',
      phone: '',
      pwd: ''
    }
  },
  methods: {
    ...mapMutations('tabbar', ['hide', 'show']),
    handleClick (data) {
      this.isShow = data
    },
    handleRegister () {
      this.$router.push('/register')
    },
    handleIndex () {
      this.$router.push('/index')
    },
    handleLogin () {
      const Number = Base64.stringify(sha256(this.phone))
      const Pass = Base64.stringify(sha256(this.pwd))
      const allUser = JSON.parse(localStorage.getItem('users'))
      const res = allUser.some(item => item.Number === Number && item.Pass === Pass)
      if (res) {
        Toast.success({
          message: '登录成功',
          className: 'myself',
          duration: 500,
          onClose: () => {
            this.$router.push('/mine')
          }
        })
        localStorage.setItem('token', JSON.stringify({ isLogin: true }))
      } else {
        Toast.fail({
          message: '登录失败',
          className: 'myself'
        })
      }
    }
  },
  mounted () {
    this.hide()
  },
  destroyed () {
    this.show()
  }
}
</script>

<style lang="scss" scoped>
.mine{
  position: absolute;
  top:0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .title{
    padding: 0px 15px;
    height: 50px;
    display: flex;
    width: 100%;
    background: white;
    box-sizing: border-box;
    align-items: center;
    div{
      flex: 1;
      text-align: center;
    }
    div:nth-child(1){
      text-align: left;
    }
    div:nth-child(3){
      text-align: right;
    }
  }
  .login-page{
    margin: 15px 15px 0px;
    .log{
      width: 100%;
      display: flex;
      background: #fcfcfc;
      div{
        width: 50%;
        text-align: center;
        padding: 10px 0px;
        font-size: 14px;
        a{
          text-decoration: none;
          color:gray;
          padding: 6px;
        }
      }
    }
    .reg{
      .input{
        padding:0px 10px;
        background: white;
        box-sizing: border-box;
        position: relative;
        input{
          width: 100%;
          height: 50px;
          border: none;
          outline: none;
        }
        .phone{
          border-bottom: 1px solid #ddd;
        }
        .remove{
          position: absolute;
          right: 15px;
          bottom: 17px;
          font-size: 14px;
        }
      }
      .btnsure{
        background: rgb(255,212,68);
        text-align: center;
        font-size: 14px;
        height: 45px;
        line-height: 45px;
        width: 100%;
        border:none;
        margin-top: 15px;
      }
      .remenber{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
      }
      .soonreg{
        margin-top: 10px;
        font-size: 14px;
        text-align: right;
      }
    }
  }
  .click {
    border-bottom: 2px solid black;
    color:black!important;
  }
}
</style>
